<!--车型管理-->
<template>

    <div class="minW1060-auto bg-fff mt10">
        <div class="pad20 ml10">

            <!--搜索条件-->
            <el-row class="text-left">
                <el-col :span="10">
                    <div class="dlblock-mb20">
                        <span class="pr5">车型</span>
                        <el-input :maxlength="10" clearable placeholder="请输入车型" show-word-limit
                                  style="width: 200px;" v-model.trim="query.name"></el-input>
                    </div>
                    <div class="dlblock-mb20">
                        <span class="pr5 ml10">品牌</span>
                        <el-select style="width: 200px;" v-model="query.brandId" clearable
                                   placeholder="请选择">
                            <el-option
                                    v-for="item in brand"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="dlblock-mb20 pr5 pl5">
                        <el-button @click="query.page = 1,getVehicleTypeFn()" circle
                                   class="el-icon-search ml5"></el-button>
                    </div>
                </el-col>
                <el-col :span="13" align="right">
                    <div class="dlblock-mb20 pr10 ml20">
                        <el-button @click="dialogVisible = true" type="primary">添加</el-button>
                    </div>
                    <div class="dlblock-mb20 pr10">
                        <el-button @click="deleteAll" type="danger">删除</el-button>
                    </div>
                </el-col>
            </el-row>

            <!--车辆类型编辑弹出框-->
            <el-dialog
                    :before-close="handleClose"
                    :visible.sync="dialogVisible"
                    title="车型管理"
                    width="60%">

                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="基本信息" name="first">
                        <el-form :rules="rules" ref="ruleForm" label-position="right" label-width="150px" :model="form">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item prop="name" label="车型名称">
                                        <el-input clearable v-model.trim="form.name" maxlength="20" style="width: 250px"
                                                  show-word-limit
                                                  placeholder="请输入内容"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item prop="brandId" label="名牌名称">
                                        <el-select style="width: 250px" @change="selectGet" v-model="form.brandId"
                                                   clearable
                                                   placeholder="请选择">
                                            <el-option
                                                    v-for="item in brand"
                                                    :key="item.id"
                                                    :label="item.name"
                                                    :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item prop="price" label="指导价格（元）"
                                                  :rules="[
                                                      { required: true, message: '指导价格不能为空'},
                                                      { type: 'number', message: '指导价格必须为数字值'}    ]">
                                        <el-input clearable v-model.number="form.price" maxlength="10"
                                                  autocomplete="off"
                                                  style="width: 250px"
                                                  show-word-limit
                                                  placeholder="请输入内容"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item prop="fuelType" label="能源类型">
                                        <el-select style="width: 250px" v-model="form.fuelType"
                                                   clearable
                                                   placeholder="请选择">
                                            <el-option
                                                    v-for="item in FuelTypeEnum"
                                                    :key="item.value"
                                                    :label="item.name"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item prop="rank" label="车型级别">
                                        <el-select style="width: 250px" v-model="form.rank"
                                                   clearable
                                                   placeholder="请选择">
                                            <el-option
                                                    v-for="item in rankEnum"
                                                    :key="item.value"
                                                    :label="item.name"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="其他信息" name="second">
                        <el-form label-position="right" label-width="150px" :model="form">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="载重类型">
                                        <el-select style="width: 250px" v-model="form.weightType"
                                                   clearable
                                                   placeholder="请选择">
                                            <el-option :value="1" label="微型"></el-option>
                                            <el-option :value="2" label="轻型"></el-option>
                                            <el-option :value="3" label="中型"></el-option>
                                            <el-option :value="4" label="重型"></el-option>
                                            <el-option :value="5" label="特重型"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="驾照等级">
                                        <el-select style="width: 250px" v-model="form.drivingLicense"
                                                   clearable
                                                   placeholder="请选择">
                                            <el-option
                                                    v-for="item in drivingLicenseEnum"
                                                    :key="item.value"
                                                    :label="item.name"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="排放标准">
                                        <el-select style="width: 250px" v-model="form.discharge" clearable
                                                   placeholder="请选择">
                                            <el-option
                                                    v-for="item in dischargeEnum"
                                                    :key="item.value"
                                                    :label="item.name"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item prop="fuelType" label="排放标准阶段">
                                        <el-select style="width: 250px" v-model="form.stage" clearable
                                                   placeholder="请选择">
                                            <el-option :value="1" label="第一阶段"></el-option>
                                            <el-option :value="2" label="第二阶段"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="气缸排列方式">
                                        <el-select style="width: 250px" v-model="form.arrange" clearable
                                                   placeholder="请选择">
                                            <el-option :value="1" label="直列"></el-option>
                                            <el-option :value="2" label="V型排列"></el-option>
                                            <el-option :value="3" label="水平横置"></el-option>
                                            <el-option :value="4" label="星型排列"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="气缸数" prop="cylinders"
                                                  :rules="[  { type: 'number', message: '必须为数字值'} ]">
                                        <el-input clearable v-model.number="form.cylinders" maxlength="10"
                                                  autocomplete="off"
                                                  style="width: 250px"
                                                  show-word-limit
                                                  placeholder="请输入内容"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="涡轮增压">
                                        <el-select style="width: 250px" v-model="form.turbo" clearable
                                                   placeholder="请选择">
                                            <el-option :value="1" label="涡轮增压"></el-option>
                                            <el-option :value="2" label="机械增压"></el-option>
                                            <el-option :value="3" label="两者兼有"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="发动机排量" prop="displacement"
                                                  :rules="[  { type: 'number', message: '必须为数字值'} ]">
                                        <el-input clearable v-model.number="form.displacement" maxlength="10"
                                                  autocomplete="off"
                                                  style="width: 250px"
                                                  show-word-limit
                                                  placeholder="请输入内容"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item prop="consumption" label="工信部油耗"
                                                  :rules="[
                                                      { type: 'number', message: '必须为数字值'}    ]">
                                        <el-input clearable v-model.number="form.consumption" maxlength="10"
                                                  autocomplete="off"
                                                  style="width: 250px"
                                                  show-word-limit
                                                  placeholder="请输入内容"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item prop="compression" label="压缩比"
                                                  :rules="[
                                                      { type: 'number', message: '必须为数字值'}    ]">
                                        <el-input clearable v-model.number="form.compression" maxlength="10"
                                                  autocomplete="off"
                                                  style="width: 250px"
                                                  show-word-limit
                                                  placeholder="请输入内容"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item prop="acceleration" label="加速时间"
                                                  :rules="[
                                                      { type: 'number', message: '必须为数字值'}    ]">
                                        <el-input clearable v-model.number="form.acceleration" maxlength="10"
                                                  autocomplete="off"
                                                  style="width: 250px"
                                                  show-word-limit
                                                  placeholder="请输入内容"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item prop="roz" label="燃料标号"
                                                  :rules="[
                                                      { type: 'number', message: '必须为数字值'}    ]">
                                        <el-input clearable v-model.number="form.roz" maxlength="10"
                                                  autocomplete="off"
                                                  style="width: 250px"
                                                  show-word-limit
                                                  placeholder="请输入内容"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item prop="axleCount" label="轴数"
                                                  :rules="[
                                                      { type: 'number', message: '必须为数字值'}    ]">
                                        <el-input clearable v-model.number="form.axleCount" maxlength="10"
                                                  autocomplete="off"
                                                  style="width: 250px"
                                                  show-word-limit
                                                  placeholder="请输入内容"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item prop="axleLoad" label="轴重"
                                                  :rules="[ { type: 'number', message: '必须为数字值'}    ]">
                                        <el-input clearable v-model.number="form.axleLoad" maxlength="10"
                                                  autocomplete="off"
                                                  style="width: 250px"
                                                  show-word-limit
                                                  placeholder="请输入内容"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item prop="capacity" label="核定载客人数"
                                                  :rules="[
                                                      { type: 'number', message: '必须为数字值'}    ]">
                                        <el-input clearable v-model.number="form.capacity" maxlength="10"
                                                  autocomplete="off"
                                                  style="width: 250px"
                                                  show-word-limit
                                                  placeholder="请输入内容"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item prop="curbWeight" label="整备质量"
                                                  :rules="[
                                                      { type: 'number', message: '必须为数字值'}    ]">
                                        <el-input clearable v-model.number="form.curbWeight" maxlength="10"
                                                  autocomplete="off"
                                                  style="width: 250px"
                                                  show-word-limit
                                                  placeholder="请输入内容"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item prop="ratedWeight" label="额定载质量"
                                                  :rules="[
                                                      { type: 'number', message: '必须为数字值'}    ]">
                                        <el-input clearable v-model.number="form.ratedWeight" maxlength="10"
                                                  autocomplete="off"
                                                  style="width: 250px"
                                                  show-word-limit
                                                  placeholder="请输入内容"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item prop="seatCount" label="座位数"
                                                  :rules="[
                                                      { type: 'number', message: '必须为数字值'}    ]">
                                        <el-input clearable v-model.number="form.seatCount" maxlength="10"
                                                  autocomplete="off"
                                                  style="width: 250px"
                                                  show-word-limit
                                                  placeholder="请输入内容"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="添加品牌" name="third">
                        <el-form label-position="right" label-width="150px" :model="brandParam">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="机构名称">
                                        <el-cascader
                                                v-model="brandParam.groupIds"
                                                :show-all-levels="false"
                                                :options="groupTree"
                                                :props="{ value: 'orgId', label: 'orgName',checkStrictly: true }"
                                                clearable></el-cascader>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item prop="brandName" label="品牌名称" :rules="[
                                                      { required: true, message: '品牌名称不能为空'} ]">
                                        <el-input clearable v-model.trim="brandParam.brandName" maxlength="10"
                                                  autocomplete="off"
                                                  style="width: 250px"
                                                  show-word-limit
                                                  placeholder="请输入内容"></el-input>
                                        &nbsp; &nbsp;
                                        <el-button type="primary" @click="addBrands">添加品牌</el-button>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
                <span class="dialog-footer" slot="footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button @click="addVehicleType('ruleForm')" type="primary">保 存</el-button>
                </span>
            </el-dialog>

            <!--表格-->
            <el-row>
                <el-table
                        :data="vehicleTypeList"
                        @selection-change="selectionchange"
                        border
                        class="my-table"
                        header-row-class-name="my-table-header" stripe>
                    <el-table-column align="center" fixed type="selection" width="80"></el-table-column>
                    <el-table-column align="center" label="车型" prop="name"></el-table-column>
                    <el-table-column align="center" label="品牌" prop="brandName" width="100"></el-table-column>
                    <el-table-column align="center" label="车型级别" prop="rankName"></el-table-column>
                    <el-table-column align="center" label="能源类型" prop="fuelTypeName"></el-table-column>
                    <el-table-column align="center" label="指导价格（元）" prop="price"></el-table-column>
                    <el-table-column align="center" fixed="right" label="操作" width="150">
                        <template slot-scope="{row}">
                            <p>
                                <el-button @click="editor(row.id)" style="color: #609eff" type="text">编辑</el-button>
                                <el-button @click="deleteOne(row.id)" style="color: #f56c6c" type="text">删除</el-button>
                            </p>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <br>

            <!--分页控件-->
            <el-row :gutter="20">
                <el-col :offset="6" :span="12" align="center">
                    <el-pagination :current-page="query.page" :page-size="query.size" :total="query.total"
                                   @current-change="pageChange"
                                   background layout="total, prev, pager, next">
                    </el-pagination>
                </el-col>
            </el-row>

        </div>
    </div>

</template>

<script>

    import {
        addBrand,
        deleteVehicleType,
        FuelTypeEnum,
        getBrandInfo,
        getDischargeEnum,
        getDrivingLicenseEnum,
        getGroupTree,
        getRank,
        getVehicleType,
        getVehicleTypeById,
        insertVehicleType
    } from "@/api"

    export default {
        name: "index",
        components: {},
        data() {
            return {

                //分组数
                groupTree: [],

                //添加品牌参数
                brandParam: {
                    groupIds: [],
                },

                //能源类型枚举
                FuelTypeEnum: [],
                //车型级别枚举
                rankEnum: [],
                //驾驶此车辆所需最低等级的驾照
                drivingLicenseEnum: [],
                dischargeEnum: [],

                //激活标签页
                activeName: 'first',

                //校验规则
                rules: {
                    name: [
                        {required: true, message: '请输入车型名称', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 20 个字符', trigger: 'blur'}
                    ],
                    brandId: [
                        {required: true, message: '请选择品牌', trigger: 'change'},
                    ],
                    fuelType: [
                        {required: true, message: '请选择能源类型', trigger: 'change'},
                    ],
                    rank: [
                        {required: true, message: '请选择车型级别', trigger: 'change'},
                    ],
                },

                //弹出框
                dialogVisible: false,

                //查询参数
                query: {
                    name: '',
                    page: 1,
                    size: 6,
                    total: 0,
                },

                //车型列表
                vehicleTypeList: [],

                //车型表单数据封装对象
                form: {
                    modelId: '',
                    name: '',
                    brandId: '',
                    brandName: '',
                    price: '',
                    fuelType: '',
                    rank: '',
                },

                //添加品牌参数
                brandForm: {},

                //品牌数据 后端查询 品牌列表集合
                brand: [],

                //多选id
                deviceTypeIds: []

            }
        },

        created() {
        },

        watch: {},

        methods: {

            //添加品牌
            addBrands() {
                if (this.brandParam.brandName != null && this.brandParam.brandName != "") {
                    let groupId = this.brandParam.groupIds[this.brandParam.groupIds.length - 1]
                    addBrand({
                        companyId: groupId,
                        name: this.brandParam.brandName,
                    }).then(res => {
                        if (res.code == 200) {
                            this.brandParam = {}
                            this.$message({type: 'success', message: '添加成功'});
                            this.getBrand()
                            this.activeName = "first"
                        }
                    })
                }

            },

            //点击标签页
            handleClick(tab, event) {
                // console.log(tab, event);
            },

            //弹窗取消
            cancel() {
                this.dialogVisible = false
                this.form = {}
                this.$message({type: 'success', message: '取消操作'});
                this.getVehicleTypeFn()
            },

            //获取类型枚举
            getEnums() {
                FuelTypeEnum().then(res => {
                    if (res.code === 200) {
                        this.FuelTypeEnum = res.data
                    }
                }).catch(() => {
                });

                getRank().then(res => {
                    if (res.code === 200) {
                        this.rankEnum = res.data
                    }
                }).catch(() => {
                });

                getDrivingLicenseEnum().then(res => {
                    if (res.code === 200) {
                        this.drivingLicenseEnum = res.data
                    }
                }).catch(() => {
                });

                getDischargeEnum().then(res => {
                    if (res.code === 200) {
                        this.dischargeEnum = res.data
                    }
                }).catch(() => {
                });
            },

            //车辆类型编辑
            editor(id) {
                this.dialogVisible = true
                getVehicleTypeById(id).then(res => {
                    if (res.code === 200) {
                        this.form = res.data

                    }
                }).catch(() => {
                });

            },

            //品牌下拉框值改变
            selectGet(id) {
                this.form.brandId = id
                if (id != '') {
                    let brandName = this.brand.find(item => item.id == id)
                    this.form.brandName = brandName.name
                }
            },

            //编辑弹出框
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            }
            ,

            //删除车辆类型
            deleteOne(id) {
                this.$confirm('此操作将永久删除该设备, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deviceTypeIds = []
                    this.deviceTypeIds.push(id)
                    deleteVehicleType(this.deviceTypeIds).then(res => {
                        if (res.code == 200) {
                            this.$message({type: 'success', message: '删除成功'});
                            this.getVehicleTypeFn()
                        } else {
                            this.$message({type: 'error', message: '删除失败'});
                        }
                    })
                }).catch(() => {
                    this.$message({type: 'info', message: '已取消删除'});
                });
            }
            ,

            //车辆多选
            selectionchange(val) {
                this.deviceTypeIds = []
                val.forEach(x => {
                    this.deviceTypeIds.push(x.id)
                });
            }
            ,

            //删除全部
            deleteAll() {
                if (this.deviceTypeIds.length != 0) {
                    this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        deleteVehicleType(this.deviceTypeIds).then(res => {
                            if (res.code == 200) {
                                this.$message({type: 'success', message: '删除成功'});
                                this.getVehicleTypeFn()
                            } else {
                                this.$message({type: 'error', message: '删除失败'});
                            }
                        })
                    }).catch(() => {
                        this.$message({type: 'info', message: '已取消删除'});
                    });
                } else {
                    this.$message({type: 'error', message: '请先选择需要删除的车型'});
                }
            }
            ,

            //获取车辆类型信息
            getVehicleTypeFn() {
                getVehicleType({
                    pageNum: this.query.page,
                    name: this.query.name,
                    brandId: this.query.brandId,
                    modelId: this.form.modelId,
                }).then(res => {
                    this.vehicleTypeList = []
                    this.vehicleTypeList = res.data.list
                    this.query.total = res.data.count
                    this.query.size = res.data.pageSize
                })
            }
            ,

            //获取品牌信息
            getBrand() {
                getBrandInfo({}).then(res => {
                    if (res.code == 200) {
                        this.brand = res.data
                    }
                })

                //获取分组数
                getGroupTree({}).then(res => {
                    if (res.code == 200) {
                        this.groupTree = res.data.children
                    }
                })
            }
            ,

            // 分页查询
            pageChange(val) {
                this.query.page = val
                this.getVehicleTypeFn()
            }
            ,

            //添加车辆类型
            addVehicleType(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        insertVehicleType({
                            modelId: this.form.id,
                            name: this.form.name,
                            brandId: this.form.brandId,
                            brandName: this.form.brandName,
                            price: this.form.price,
                            fuelType: this.form.fuelType,
                            rank: this.form.rank,
                            weightType: this.form.weightType,
                            discharge: this.form.discharge,
                            drivingLicense: this.form.drivingLicense,
                            stage: this.form.stage,
                            arrange: this.form.arrange,
                            cylinders: this.form.cylinders,
                            turbo: this.form.turbo,
                            displacement: this.form.displacement,
                            consumption: this.form.consumption,
                            acceleration: this.form.acceleration,
                            compression: this.form.compression,
                            roz: this.form.roz,
                            axleCount: this.form.axleCount,
                            axleLoad: this.form.axleLoad,
                            capacity: this.form.capacity,
                            curbWeight: this.form.curbWeight,
                            ratedWeight: this.form.ratedWeight,
                            seatCount: this.form.seatCount,
                        }).then(res => {
                            if (res.code == 200) {
                                this.form = {}
                                this.dialogVisible = false
                                this.$message({type: 'success', message: '添加成功'});
                                this.query = {}
                                this.getVehicleTypeFn()
                            }
                        })
                    } else {
                        this.activeName = "first"
                        return false;
                    }
                });

            }

        },

        mounted() {
            this.getVehicleTypeFn()
            this.getBrand()
            this.getEnums()
        }

    }
</script>

<style scoped>
    .my-table /deep/ tr, .my-table /deep/ td {
        padding: 5px !important;
        height: 50px;
        line-height: 50px;
    }
</style>
